/* global window, joint */
import _ from 'lodash'
import example from './example'
import Toolbar from './toolbar'


// joint.setTheme('bpmn')
var graph = new joint.dia.Graph({
  type: 'bpmn'
})
var commandManager = new joint.dia.CommandManager({
  graph: graph
})

function openTools(cellView) {

  var cell = cellView.model
  var type = cell.get('type')

  // window.inspector = joint.ui.Inspector.create('#inspector-container', {
  //   cell: cell,
  //   inputs: inputs[type],
  //   groups: {
  //     general: {
  //       label: type,
  //       index: 1
  //     },
  //     appearance: {
  //       index: 2
  //     }
  //   }
  // })

  if (!cell.isLink() && !selection.collection.contains(cell)) {

    selection.collection.reset([])
    // Add the cell into the selection collection silently
    // so no selection box is rendered above the cellview.
    selection.collection.add(cell, {
      silent: true
    })

    new joint.ui.FreeTransform({
      cellView: cellView,
      allowOrthogonalResize: false,
      allowRotation: false
    }).render()

    var halo = new joint.ui.Halo({
      cellView: cellView,
      theme: 'default',
      boxContent: function (cellView) {
        return cellView.model.get('type')
      }
    })
    halo.render()
    halo.removeHandle('rotate')
    halo.removeHandle('resize')
  }
}

var keyboard = new joint.ui.Keyboard()
keyboard.on('delete backspace', function () {
  graph.removeCells(selection.collection.toArray())
})
var paper = new joint.dia.Paper({
  width: 2000,
  height: 2000,
  model: graph,
  gridSize: 10,
  perpendicularLinks: true,
  defaultLink: new joint.shapes.bpmn.Flow(),
  validateConnection: function (cellViewS, magnetS, cellViewT, magnetT, end) {
    return true
  },
  embeddingMode: true,
  frontParentOnly: false,
  validateEmbedding: function (childView, parentView) {
    var Pool = joint.shapes.bpmn.Pool
    return (parentView.model instanceof Pool) && !(childView.model instanceof Pool)
  }
}).on({
  'blank:pointerdown': function (evt, x, y) {
    if (keyboard.isActive('shift', evt)) {
      selection.startSelecting(evt, x, y)
    } else {
      selection.cancelSelection()
      paperScroller.startPanning(evt, x, y)
    }
  },
  'element:pointerdown': function (cellView, evt) {
    console.log('element:pointerdown')
  },
  'cell:pointerup': openTools
})

var paperScroller = new joint.ui.PaperScroller({
  autoResizePaper: true,
  padding: 50,
  paper: paper
})

var nav = new joint.ui.Navigator({
  paperScroller: paperScroller,
  width: 300,
  height: 200,
  padding: 10,
  zoomOptions: {
    max: 2,
    min: 0.2
  }
})
nav.$el.appendTo('#diagram-navigator')
nav.render()

var selection = new joint.ui.Selection({
  paper: paper,
  graph: graph,
  filter: ['bpmn.Pool'] // don't allow to select a pool
}).on({
  'selection-box:pointerdown': function (cellView, evt) {
    // Unselect an element if the CTRL/Meta key is pressed while a selected element is clicked.
    if (keyboard.isActive('ctrl meta', evt)) {
      selection.collection.remove(cellView.model)
    }
  }
})

/* STENCIL */

var stencil = new joint.ui.Stencil({
  graph: graph,
  paper: paper,
  layout: {
    columnWidth: 100,
    columns: 1,
    rowHeight: 100
  },
  groups: {
    one: {
      label: 'First group',
      index: 1
    },
    two: {
      label: 'Second group',
      index: 2,
      closed: true
    }
  }
})

stencil.render().$el.appendTo('#stencil-container-outer')

stencil.loadGroup([
  new joint.shapes.bpmn.Gateway(),
  new joint.shapes.bpmn.Activity()
], 'two')
stencil.loadGroup([
  new joint.shapes.bpmn.Gateway(),
  new joint.shapes.bpmn.Event(),
  new joint.shapes.bpmn.Annotation(),
  new joint.shapes.bpmn.Pool({
    attrs: {
      '.': {
        magnet: false
      },
      '.header': {
        fill: '#5799DA'
      }
    },
    lanes: {
      label: 'Pool'
    }
  }),
  new joint.shapes.bpmn.Group({
    attrs: {
      '.': {
        magnet: false
      },
      '.label': {
        text: 'Group'
      }
    }
  }),
  new joint.shapes.bpmn.Conversation(),
  new joint.shapes.bpmn.Choreography({
    participants: ['Participant 1', 'Participant 2']
  }),
  new joint.shapes.bpmn.Message(),
  new joint.shapes.bpmn.DataObject()
], 'one')

paperScroller.$el.appendTo('#paper-container')
paperScroller.center()
console.log(example)
graph.fromJSON(example)
Toolbar('#toolbar')
